<template>
  <div>
    <div style="display:flex;align-items:center;width:300px;margin:0 auto;padding-bottom:20px;">
      <slide-verify
          ref="slideblock"
          @again="onAgain"
          @fulfilled="onFulfilled"
          @success="onSuccess"
          @fail="onFail"
          :imgs="puzzleImgList"
          @refresh="onRefresh"
          :accuracy="accuracy"
          :slider-text="text"
      />
    </div>
    <div>{{ msg }}</div>
    <el-link @click="handleClick">图片看不清?</el-link>
  </div>
</template>

<script>

export default {
  name: "LoginComponent",
  data() {
    return {
      puzzleImgList: [
        require('../../assets/1.png'),
        require('../../assets/2.png'),
        require('../../assets/3.png'),
        require('../../assets/4.png'),
        require('../../assets/5.png')
      ],
      msg: "",
      text: "向右滑",
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 5,

    };
  },
  methods: {
    notify(title,message,type){
      this.$notify({
        title,
        message,
        type,
        duration : 2000
      });
    },
    // 验证成功，触发该方法
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";

      this.$emit("verification",true)

    },
    onFail() {
      this.notify("验证不通过","","warning");
      this.msg = "";
    },
    onRefresh() {
    },
    onFulfilled() {
    },
    onAgain() {
      // console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
    handleClose() {
      // console.log("val", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.aaa {
  color: red;
}
.aaa {
  border: 1px solid blue;
}
</style>